<template>
	<view class="page">
		<cu-custom bgColor="bg-green" :isBack="true">
			<block slot="content"> <text class="text-white text-bold">种植档案</text></block>
			<view v-show="TabCur==2" slot="right" @tap="addCrop">
				<text class="text-white text-bold">添加</text>
			</view>
		</cu-custom>
		<!-- 导航栏 -->
		<scroll-view scroll-x class="bg-green nav shadow">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="0==TabCur?'text-white cur':''" @tap="tabSelect" :data-id="0">
					<text class="text-lg text-bold text-white">地块信息</text>
				</view>
				<view class="cu-item flex-sub" :class="1==TabCur?'text-white cur':''" @tap="tabSelect" :data-id="1">
					<text class="text-lg text-bold text-white">承租合同</text>
				</view>
				<view class="cu-item flex-sub" :class="2==TabCur?'text-white cur':''" @tap="tabSelect" :data-id="2">
					<text class="text-lg text-bold text-white">种植作物</text>
				</view>
				<view class="cu-item flex-sub" :class="3==TabCur?'text-white cur':''" @tap="tabSelect" :data-id="3">
					<text class="text-lg text-bold text-white">种植活动</text>
				</view>
			</view>
		</scroll-view>
		<swiper :current="TabCur" style="height: 1150rpx;">
			<swiper-item>
				<scroll-view scroll-y style="height: 1200rpx;">
					<!-- 地块信息 -->
					<form>
						<view class="cu-form-group margin-top">
							<view class="title">地块名称</view>
							<input :value="landMsg.name" disabled></input>
						</view>
						<view class="cu-form-group">
							<view class="title">编号</view>
							<input :value="landMsg.code" disabled></input>
						</view>
						<view class="cu-form-group">
							<view class="title">面积</view>
							<input :value="landMsg.area" disabled>公顷</input>
						</view>
						<view class="cu-form-group">
							<view class="title">所在位置</view>
							<input :value="landMsg.location" disabled></input>
						</view>
						<view class="cu-form-group">
							<view class="title">土壤类型</view>
							<input :value="landMsg.soil" disabled></input>
						</view>
						<view class="cu-form-group">
							<view class="title">施肥情况</view>
							<input :value="landMsg.fertility" disabled></input>
						</view>
						<view class="cu-form-group">
							<view class="title">水利灌溉</view>
							<input :value="landMsg.water" disabled></input>
						</view>
					</form>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view style="height: 1200rpx;">
					<!-- 承租信息 -->
					<form>
						<view class="cu-form-group margin-top">
							<view class="title">合同名称</view>
							<input :value="contractMsg.name" disabled></input>
						</view>
						<view class="cu-form-group">
							<view class="title">涉及金额</view>
							<input :value="contractMsg.amount" disabled>元</input>
						</view>
						<view class="cu-form-group">
							<view class="title">起始时间</view>
							<input :value="contractMsg.startDate" disabled></input>
						</view>
						<view class="cu-form-group">
							<view class="title">终止时间</view>
							<input :value="contractMsg.endDate" disabled></input>
						</view>
						<view class="cu-form-group">
							<view class="title">合同文件</view>
							<input :value="contractMsg.contractUrl" disabled></input>
						</view>
					</form>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<!-- 种植信息 -->
				<scroll-view scroll-y style="height: 1200rpx;">
					<form>
						<view v-for="(item,index) in cropList" :key="index">
							<view class="cu-form-group margin-top">
								<view class="title">{{item.crop}}</view>
								<view>
									<button class="cu-btn bg-green shadow" @tap="addPc(item)">添加活动</button>
									<button class="cu-btn bg-blue shadow" @tap="changeCrop(item)">修改</button>
									<button class="cu-btn bg-red shadow" :data-plantId="item.id" @tap="deleteCrop">删除</button>
								</view>
							</view>
							<view class="cu-form-group">
								<view class="title">作物品种</view>
								<input :value="item.speicies" disabled></input>
							</view>
							<view class="cu-form-group">
								<view class="title">生长周期</view>
								<input :value="item.period" disabled>个月</input>
							</view>
							<view class="cu-form-group">
								<view class="title">预计产量</view>
								<input :value="item.predictYield" disabled>吨</input>
							</view>
							<view class="cu-form-group">
								<view class="title">实际产量</view>
								<input :value="item.actualYield" disabled>吨</input>
							</view>
						</view>
					</form>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<!-- 种植活动 -->
				<scroll-view scroll-y style="height: 1200rpx;">
					<form>
						<view v-for="(item,index) in pcList" :key="index">
							<view class="cu-form-group margin-top">
								<view class="title">{{item.title}}</view>
								<view>
									<button class="cu-btn bg-blue shadow" @tap="changePc(item)">修改</button>
									<button class="cu-btn bg-red shadow" :data-plantId="item.id" @tap="delPc(item,index)">删除</button>
								</view>
							</view>
							<view class="cu-form-group">
								<view class="title">生长期</view>
								<input :value="item.growthPhase" disabled></input>
							</view>
							<view class="cu-form-group">
								<view class="title">日期</view>
								<input :value="item.date" disabled></input>
							</view>
							<view class="cu-form-group align-start">
								<view class="title">内容</view>
								<textarea disabled placeholder="活动内容"  v-model="item.description"></textarea>
							</view>
						</view>
					</form>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				modalName: null,
				TabCur: 0,
				landId: "",
				startDate: "",
				endDate: "",
				landMsg: {},
				contractMsg: {},
				cropList: [],
				pcList:[]
			};
		},
		onLoad(options) {
			this.landId = options.landId
			this.startDate = options.startDate
			this.endDate = options.endDate
			this.getAllData()
		},
		methods: {
			//导航栏索引更换
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
			},
			addCrop() {
				uni.navigateTo({
					url: './zzda_edit?landId=' + this.landId + '&id=' + '&startDate=' + this.startDate + '&endDate=' + this.endDate
				})
			},
			changeCrop(obj) {
				var data = obj
				uni.navigateTo({
					url: './zzda_edit?landId=' + data.landId + '&id=' + data.id + '&startDate=' + this.startDate + '&endDate=' +
						this.endDate + '&crop=' + data.crop + '&speicies=' + data.speicies + '&period=' + data.period +
						'&predictYield=' + data.predictYield + '&actualYield=' + data.actualYield + '&cropId=' + data.cropId +
						'&speiciesId=' + data.speiciesId
				})
			},
			deleteCrop(e) {
				var that = this
				uni.showModal({
					title: '提示',
					content: '确定删除所选农作物信息？',
					success: function(res) {
						if (res.confirm) {
							//console.log('用户点击确定');
							that.deleteData(e)
						} else if (res.cancel) {
							//console.log('用户点击取消');
						}
					}
				});
			},
			deleteData(e) {
				uni.showLoading({
					title: '加载中'
				});
				uni.request({
					url: this.$config.apiUrl + '/dasPlantledgerController/deletePlantledgerDetail',
					data: {
						userId: this.$store.getters.userid,
						plantledgerDetailIds: [e.currentTarget.dataset.plantid],
					},
					method: "POST",
					success: (res) => {
						//console.log(res)
						if (res.data.ok) {
							uni.hideLoading();
							uni.showToast({
								icon: "success",
								title: '删除成功',
								duration: 2000
							});
							this.getAllData()
						} else {
							uni.hideLoading();
							uni.showToast({
								icon: "none",
								title: '删除失败',
								duration: 2000
							});
						}
					},
					fail() {
						uni.hideLoading();
						uni.showModal({
							title: '提示',
							content: "删除失败",
							showCancel: false
						});
					}
				});
			},
			getAllData() {
				uni.showLoading({
					title: '加载中'
				});
				uni.request({
					url: this.$config.apiUrl + '/dasPlantledgerController/plantledgerDetail',
					data: {
						userId: this.$store.getters.userid,
						landId: this.landId,
						year: this.startDate
					},
					method: "GET",
					success: (res) => {
						uni.hideLoading();
						//console.log(res)
						if (res.data.ok) {
							this.landMsg = res.data.data.land;
							this.contractMsg = res.data.data.contract;
							this.cropList = res.data.data.cropList;
							this.pcList = res.data.data.pcList;
						} else {
							uni.hideLoading();
							uni.showToast({
								icon: "none",
								title: '获取种植详情失败',
								duration: 1000
							});
						}
					},
					fail() {
						uni.hideLoading();
						uni.showModal({
							title: '提示',
							content: "获取种植详情失败",
							showCancel: false
						});
					}
				});
			},
			
			addPc:function(e) {
				e.startDate = this.startDate
				e.endDate = this.endDate
				e.flag='add';
				this.$Router.push({name: 'zzda_pc_edit', params:e})
			},
			changePc: function(e) {
				e.landId = this.landId;
				e.startDate = this.startDate;
				e.endDate = this.endDate;
				e.flag='edit';
				this.$Router.push({name: 'zzda_pc_edit', params:e})
			},
			//删除种植活动
			delPc: function(e,key) {
				var me_=this;
				uni.showModal({
				    title: '提示',
				    content: '确定删除么?',
				    success: function (res) {
				        if (res.confirm) {
				           uni.showLoading({
								title: '执行删除中...'
				           });
						   uni.request({
								url: me_.$config.apiUrl+"/dasPlantledgerController/delPlantactivity",
								data: {
									id: e.id
								},
								success: data => {
									uni.hideLoading();
									if (data.data.ok) {
										me_.pcList.splice(key,1);
									}
									uni.showToast({
									    title: data.data.message,
									    duration: 2000
									});
								},
								fail: (data, code) => {
									console.log('fail' + JSON.stringify(data));
								}
						   });
				        } else if (res.cancel) {
				            // console.log('用户点击取消');
				        }
				    }
				});
			},
			
		}
	}
</script>

<style>
	.page {
		height: 100Vh;
		width: 100vw;
	}

	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
</style>
